<template>
	<view style="background-color: #F5F5F5;">
		<el-row style="display: flex;justify-content: space-between;">
			<el-col :span="width1">
				<view style="background-color: #ffffff;height: 1000px;">
					<!-- <view style="float: right;margin: 20rpx;" @click="shouqi">
						<i v-if="width1==6" class="el-icon-back"></i>
						<i v-if="width1==3" class="el-icon-right"></i>
					</view> -->


					<view style="font-size: 34rpx;font-weight: bold;text-align: center;">公告</view>

					<view v-for="(item,index) in noticeslist" :key="index" style="padding: 10rpx 20rpx;">
						<view style="display: flex;align-items: center;">
							<view style="width: 10%;">
								<el-badge style="margin: 0 10rpx;" :is-dot="!item.read" class="el-icon-bell">
								</el-badge>
							</view>
							<view style="width: 90%;">
								<el-link class="aaa" :underline="false" @click="clickcontent(item,index)"
									style="font-weight: bolder;">
									{{item.title}}
								</el-link>
								<el-link :underline="false" @click="clickcontent(item,index)">
									{{item._add_time_str}}
								</el-link>
							</view>
						</view>
					</view>

				</view>
			</el-col>
			<!-- <el-col :span="0.5">
				<view style="height: 1000px;"></view>
			</el-col> -->
			<el-col :span="15">
				<view style="background-color: #ffffff; height: 1000px;padding: 20rpx;">
					<rich-text :nodes="content" class="content"></rich-text>
				</view>
			</el-col>
		</el-row>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const _ = db.command;
	export default {
		data() {
			return {
				content: "",
				noticeslist: [],
				width1: 8,
				isread: [],
			};
		},
		async onLoad(options) {
			console.log("id=", options);
			if (options.id) {
				console.log("id=", options.id);
				let noticeInfo = await db.collection('b_notices_manage').doc(options.id).get()
				this.content = noticeInfo.result.data[0].content;
			}
		},
		async onShow() {
			this.getnotices()
		},
		methods: {
			getnotices() {
				vk.callFunction({
					url: 'admin/dls/kh/index1/index2',
					// title: '请求中...',
					loading: false,
					data: {
						type: "getgg"
					},
					success: (res) => {
						// console.log("res=", res);
						let user_id = vk.vuex.get('$user.userInfo._id');
						let lists = res.notices.data;
						for (var i = 0; i < lists.length; i++) {
							if (lists[i].isread.includes(user_id)) {
								console.log("已读");
								lists[i].read = true;
							}
						}
						this.noticeslist = lists;
						console.log("数据返回结果=>", res.notices.data);
						if (!this.content) {
							this.content = res.notices.data[0].content;
						}
					}
				});
			},
			async clickcontent(item, index) {
				this.content = item.content;
				let user_id = vk.vuex.get('$user.userInfo._id');
				if (this.noticeslist[index].isread.includes(user_id)) {
					// vk.alert('已读过');
					return;
				}
				this.noticeslist[index].read = true;
				vk.callFunction({
					url: 'admin/dls/kh/index1/index2',
					// title: '请求中...',
					loading: false,
					data: {
						type: "update_read",
						_id: item._id
					},
					success: (data) => {
						this.getnotices()
					}
				});

				// let user_id = vk.vuex.get('$user.userInfo._id');
				// let res = await db.collection('b_notices_gl').doc(_id).update({
				// 	// users: dbCmd.push('aaa')
				// 	isread: _.push([user_id])
				// })
			},
		}
	}
</script>

<style lang="scss">
	.aaa {
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>
